<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  
</head>
<style>
  * {
    padding: 0;
    margin: 0;
  }
  .contain{
    display: flex;
    flex-direction: column;
    height: 100vh;
  }
  main{
    flex:1;
    background: skyblue;
    display: flex;
  }
  header,footer{
    height: 100px;
    background: red;
  }
</style>
<body>
      <div class="contain">
        <header>header</header>
        <main>
            <div style="width:200px;background: yellow;">1111111111111111</div>
            <div style="height:calc(100vh - 200px);overflow: auto;flex:1">
               <p style="height:1500px">55555</p>
            </div>
        </main>
        <footer>footer</footer>
      </div>
</body>
<script>
    

    
</script>
</html>
